<style lang="css" scoped>
	.ivu-modal{
		height:700px;
		overflow: hidden;
	}
	.loading{
		position: fixed;
		top:50%;
		left:50%;
		z-index: 999;
	}

</style>
<template>
  <div>
        <Spin class="loading" v-if="loadingshow" size="large">
        </Spin>
    <Card>
		<Collapse v-model="values">
		<Panel name="1">
			<span style="font-weight:bold">搜索面板</span>
	        <Row slot="content">
	            <Col span="24">
	            <Card style="margin-bottom: 10px">
	                <Form inline>
	                    <FormItem label="姓名：" style="margin-bottom: 0;" :label-width="80">
	                        <Input  placeholder="请输入姓名"></Input>
	                    </FormItem>
	                    <FormItem label="性别：" style="margin-bottom: 0" :label-width="80">
							<Select clearable placeholder='请选择性别' style="width:100px">
								<Option :value="0">不限</Option>
								<Option :value="sexArr.man">男</Option>
								<Option :value="sexArr.woman">女</Option>
							</Select>
	                    </FormItem>
						<FormItem label="年龄区间：" style="margin-bottom: 0" :label-width="80">
							<InputNumber :max="10000" :min="0" v-model="formItems.age"></InputNumber> ——
							<InputNumber :max="10000" :min="0" v-model="formItems.age"></InputNumber>
						</FormItem>
						<FormItem label="所属部门：" style="margin-bottom: 0" :label-width="80">
							<Cascader :data="mentdata" :value.sync="value1"></Cascader>
						</FormItem>
						<FormItem label="手机号：" style="margin-bottom: 0" :label-width="80">
							<Input placeholder="请输入手机号"></Input>
						</FormItem>
						<FormItem label="身份证号：" style="margin-bottom: 0" :label-width="80">
							<Input placeholder="请输入身份证号："></Input>
						</FormItem>
						<FormItem label="入职时间：" style="margin-bottom: 0;margin-top:20px;" :label-width="80">
							<DatePicker type="date" style="width: 200px"></DatePicker> ——
							<DatePicker type="date" style="width: 200px"></DatePicker>
						</FormItem>
						<FormItem label="是否退伍军人：" style="margin-bottom: 0;margin-top:20px;" :label-width="100">
							<Select clearable style="width:100px">
								<Option :value="0">不限</Option>
								<Option :value="sexArr.man">是</Option>
								<Option :value="sexArr.woman">否</Option>
							</Select>
						</FormItem>
						<FormItem label="是否党员：" style="margin-bottom: 0;margin-top:20px;" :label-width="100">
							<Select clearable style="width:100px">
								<Option :value="0">不限</Option>
								<Option :value="sexArr.man">是</Option>
								<Option :value="sexArr.woman">否</Option>
							</Select>
						</FormItem>
						<FormItem label="职员状态：" style="margin-bottom: 0;margin-top:20px;" :label-width="80">
							<Select clearable style="width:100px">
								<Option :value="0">不限</Option>
								<Option :value="sexArr.man">在职</Option>
								<Option :value="sexArr.woman">离职</Option>
							</Select>
						</FormItem>
						<Collapse v-model="values2" style="margin-top:20px;">
							<Panel name="1-1">
								<span style="font-weight:bold">父辈搜索信息</span>
								<div slot="content">
									<FormItem label="姓名：" style="margin-bottom: 0;margin-top:20px;" :label-width="80">
				                        <Input  placeholder="请输入姓名"></Input>
				                    </FormItem>
				                    <FormItem label="性别：" style="margin-bottom: 0;margin-top:20px;" :label-width="80">
										<Select clearable placeholder='请选择性别' style="width:100px">
											<Option :value="0">不限</Option>
											<Option :value="sexArr.man">男</Option>
											<Option :value="sexArr.woman">女</Option>
										</Select>
				                    </FormItem>
									<FormItem label="年龄区间：" style="margin-bottom: 0;margin-top:20px;" :label-width="100">
										<InputNumber :max="10000" :min="0" v-model="formItems.age"></InputNumber> ——
										<InputNumber :max="10000" :min="0" v-model="formItems.age"></InputNumber>
									</FormItem>
									<FormItem label="是否退伍军人：" style="margin-bottom: 0;margin-top:20px;" :label-width="100">
										<Select clearable style="width:100px">
											<Option :value="0">不限</Option>
											<Option :value="sexArr.man">是</Option>
											<Option :value="sexArr.woman">否</Option>
										</Select>
									</FormItem>
									<FormItem label="是否党员：" style="margin-bottom: 0;margin-top:20px;" :label-width="100">
										<Select clearable style="width:100px">
											<Option :value="0">不限</Option>
											<Option :value="sexArr.man">是</Option>
											<Option :value="sexArr.woman">否</Option>
										</Select>
									</FormItem>
								</div>
							</Panel>

							<Panel name="1-2">
								<span style="font-weight:bold">子辈搜索信息</span>
								<div slot="content">
									<FormItem label="姓名：" style="margin-bottom: 0;margin-top:20px;" :label-width="80">
				                        <Input  placeholder="请输入姓名"></Input>
				                    </FormItem>
				                    <FormItem label="性别：" style="margin-bottom: 0;margin-top:20px;" :label-width="80">
										<Select clearable placeholder='请选择性别' style="width:100px">
											<Option :value="0">不限</Option>
											<Option :value="sexArr.man">男</Option>
											<Option :value="sexArr.woman">女</Option>
										</Select>
				                    </FormItem>
									<FormItem label="年龄区间：" style="margin-bottom: 0;margin-top:20px;" :label-width="100">
										<InputNumber :max="10000" :min="0" v-model="formItems.age"></InputNumber> ——
										<InputNumber :max="10000" :min="0" v-model="formItems.age"></InputNumber>
									</FormItem>
									<FormItem label="是否退伍军人：" style="margin-bottom: 0;margin-top:20px;" :label-width="100">
										<Select clearable style="width:100px">
											<Option :value="0">不限</Option>
											<Option :value="sexArr.man">是</Option>
											<Option :value="sexArr.woman">否</Option>
										</Select>
									</FormItem>
									<FormItem label="是否党员：" style="margin-bottom: 0;margin-top:20px;" :label-width="100">
										<Select clearable style="width:100px">
											<Option :value="0">不限</Option>
											<Option :value="sexArr.man">是</Option>
											<Option :value="sexArr.woman">否</Option>
										</Select>
									</FormItem>
								</div>
							</Panel>
						</Collapse>
	                    <FormItem style="margin-bottom: 0;margin-top:20px;">
	                        <Button type="primary" @click="search">搜索</Button>
	                    </FormItem>
	                </Form>
	            </Card>
	            </Col>
	        </Row>
       	</Panel>
        </Collapse>
      <tables border ref="tables" editable v-model="tableData" :columns="columns" @on-delete="handleDelete" />
    </Card>
		<Modal v-model="modelshow" width="700" :styles="{top: '30px',height:'80%',overflow: 'hidden',overflowY:'scroll'}" @on-visible-change="doCancel"  @on-ok="onClickOk">
			<p slot="header" style="color:#2d8cf0;">
				<Icon type="information-circled"></Icon>
				<span>详细信息</span>
			</p>
			<Form ref="myForm" :model="formItems" :label-width="90">
				<FormItem label="姓名" prop="name">
					<Input v-model="formItems.name" placeholder="请输入姓名" style="width: 50%;"></Input>
				</FormItem>
				<FormItem label="性别" prop="sex">
					<Select v-model="formItems.sex" clearable placeholder='请选择性别' style="width:100px">
						<Option :value="sexArr.man">男</Option>
						<Option :value="sexArr.woman">女</Option>
					</Select>
				</FormItem>
				<FormItem label="年龄" prop="age">
					<InputNumber :max="10000" :min="0" v-model="formItems.age"></InputNumber>
				</FormItem>
				<FormItem label="手机号" prop="mobile">
						<Input v-model="formItems.mobile" placeholder="请输入手机号" style="width: 50%;"></Input>
				</FormItem>
				<FormItem label="身份证号" prop="idcard">
						<Input v-model="formItems.idcard" placeholder="请输入手机号" style="width: 50%;"></Input>
				</FormItem>
				<FormItem label="生日" prop="shengri">
					<DatePicker type="date" placeholder="选择入职时间" :value="formItems.shengri" style="width: 200px"></DatePicker>
				</FormItem>
				<FormItem label="入职时间" prop="rztime">
					<DatePicker type="date" placeholder="选择入职时间" :value="formItems.rztime" style="width: 200px"></DatePicker>
				</FormItem>
				<FormItem label="是否党员" prop="isdang">
					<RadioGroup v-model="formItems.isdang">
						<Radio label="是"></Radio>
						<Radio label="否"></Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="是否退伍军人" prop="istui">
					<RadioGroup v-model="formItems.istui">
						<Radio label="是"></Radio>
						<Radio label="否"></Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="是否结婚" prop="ishun">
					<RadioGroup v-model="formItems.ishun">
						<Radio label="是"></Radio>
						<Radio label="否"></Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="职员状态" prop="status">
					<RadioGroup v-model="formItems.status">
						<Radio label="在职"></Radio>
						<Radio label="离职"></Radio>
					</RadioGroup>
				</FormItem>
				<p style="font-size: 14px;font-weight: bold;">父辈信息</p>
				<FormItem label="姓名" prop="parentName">
						<Input v-model="formItems.parentName" placeholder="请输入姓名" style="width: 50%;"></Input>
				</FormItem>
				<FormItem label="性别" prop="parentsex">
					<Select v-model="formItems.parentsex" clearable placeholder='请选择性别' style="width:100px">
						<Option :value="sexArr.man">男</Option>
						<Option :value="sexArr.woman">女</Option>
					</Select>
				</FormItem>
				<FormItem label="年龄" prop="parentage">
					<InputNumber :max="10000" :min="0" v-model="formItems.parentage"></InputNumber>
				</FormItem>
				<p style="font-size: 14px;font-weight: bold;">子辈信息</p>
				<FormItem label="姓名" prop="childName">
						<Input v-model="formItems.childName" placeholder="请输入姓名" style="width: 50%;"></Input>
				</FormItem>
				<FormItem label="性别" prop="childsex">
					<Select v-model="formItems.childsex" clearable placeholder='请选择性别' style="width:100px">
						<Option :value="sexArr.man">男</Option>
						<Option :value="sexArr.woman">女</Option>
					</Select>
				</FormItem>
				<FormItem label="年龄" prop="childage">
					<InputNumber :max="10000" :min="0" v-model="formItems.childage"></InputNumber>
				</FormItem>
			</Form>
		</Modal>
		<Modal v-model="jfshow" width="700" :styles="{top: '30px',maxHeight:'80%',overflow: 'hidden',overflowY:'scroll'}" @on-visible-change="doCancel">
			<p slot="header" style="color:#2d8cf0;">
				<Icon type="information-circled"></Icon>
				<span>奖罚记录</span>
			</p>
			<p style="font-size:14px;padding:3px;font-weight:bold">2018年 10月1日</p>
			<div style="margin-top:10px;font-size:14px;border:1px solid #ccc;padding:10px;border-radius:5px;margin-bottom:15px;"><span style="font-size:16px;">奖励一等奖。</span>
			<p style="margin-top:10px;font-weight:bold">奖罚原因：执行任务出色。</p>
			</div>
			<p style="font-size:14px;padding:3px;font-weight:bold">2018年 12月3日</p>
			<div style="margin-top:10px;font-size:14px;border:1px solid #ccc;padding:10px;border-radius:5px;margin-bottom:15px;"><span style="font-size:16px;">奖励一等奖。</span>
			<p style="margin-top:10px;font-weight:bold">奖罚原因：执行任务出色。</p>
			</div>
			<p style="font-size:14px;padding:3px;font-weight:bold">2018年 10月1日</p>
			<div style="margin-top:10px;font-size:14px;border:1px solid #ccc;padding:10px;border-radius:5px;margin-bottom:15px;"><span style="font-size:16px;">奖励一等奖。</span>
			<p style="margin-top:10px;font-weight:bold">奖罚原因：执行任务出色。</p>
			</div>
			<p style="font-size:14px;padding:3px;font-weight:bold">2018年 12月3日</p>
			<div style="margin-top:10px;font-size:14px;border:1px solid #ccc;padding:10px;border-radius:5px;margin-bottom:15px;"><span style="font-size:16px;">奖励一等奖。</span>
			<p style="margin-top:10px;font-weight:bold">奖罚原因：执行任务出色。</p>
			</div>
		</Modal>
		<Modal v-model="jsshow" width="700" :styles="{top: '30px',maxHeight:'80%',overflow: 'hidden',overflowY:'scroll'}" @on-visible-change="doCancel">
			<p slot="header" style="color:#2d8cf0;">
				<Icon type="information-circled"></Icon>
				<span>晋升记录</span>
			</p>

			<tables ref="tables" editable v-model="jstable" :columns = columns2 />
		</Modal>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '姓名', key: 'handle', sortable: false, align: 'center',button:(h, params, vm) => {
            return h('Button', {
              props: {
                type: 'text'
              },
              on: {
                click: () => {
                  console.log(params)
                  // this.formItems = this.tableData[params.index];
                  // this.modelshow = true;
                  this.$router.push({
                    name: '详细信息',
                    query: {
                      id: params.row.id
                    }
                  })
                }
              }
            }, params.row.name)          
        } },
        { title: '性别', key: 'sex', editable: false, align: 'center' },
        { title: '年龄', key: 'age', align: 'center' },
        { title: '生日', key: 'shengri', align: 'center' },
        { title: '手机号', key: 'mobile', align: 'center' },
        { title: '身份证号', key: 'idcard', align: 'center' },
        { title: '是否党员', key: 'isdang', align: 'center' },
        { title: '是否已婚', key: 'ishun', align: 'center' },
        { title: '入职时间', key: 'rztime', align: 'center' },
        {
          title: '操作',
          key: 'handle',
		  align: 'center',
		  width: 350,
          button: [
            (h, params, vm) => {
              return h('Button', {
                props: {
                  type: 'info'
                },
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => {
                    console.log(params)
                    this.formItems = this.tableData[params.index]
                    this.modelshow = true
                  }
                }
              }, '查看详细信息')
            },
            (h, params, vm) => {
              return h('Button', {
                props: {
                  type: 'warning'
                },
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => {
                    this.jfshow = true
                  }
                }
              }, '奖罚记录')
            },
            (h, params, vm) => {
              return h('Button', {
                props: {
                  type: 'primary'
                },
                on: {
                  click: () => {
                    this.jsshow = true
                  }
                }
              }, '晋升记录')
            }
          ]
        }
      ],
      columns2: [
      	{ title: '日期', key: 'date', sortable: false, align: 'center' },
      	{ title: '晋升', key: 'type', sortable: false, align: 'center' },
      	{ title: '职位', key: 'position', sortable: false, align: 'center' }
      ],
      tableData: [],
      jstable: [],
      modelshow: false,
      formItems: {
        name: '',
        sex: '男',
        age: 0,
        mobile: '',
        parentName: '',
        parentsex: '男',
        parentage: 0,
        childName: '',
        childsex: '男',
        childage: 0,
        rztime: ''
      },
      values: '1',
      values2: ['1-1', '1-2'],
      clickType: 'edit',
      sexArr: { man: '男', woman: '女' },
      jfshow: false,
      jsshow: false,
      value1: [],
      loadingshow: false,
      mentdata: [ {
        value: 'jiangsu',
        label: '市',
        children: [
          {
            value: 'nanjing',
            label: '区',
            children: [
              {
                value: 'fuzimiao',
                label: '街道'
              }
            ]
          },
          {
            value: 'suzhou',
            label: '县',
            children: [
              {
                value: 'zhuozhengyuan',
                label: '乡'
              },
              {
                value: 'shizilin',
                label: '镇'
              }
            ]
          }
        ]
      }]

    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    doCancel (data) {
      console.log(222333)
    },
    alertAdd () {
      this.formItems = {}
      this.modelshow = true
      this.clickType = 'add'
    },
    onClickOk () {
      console.log(this.formItems)
      if (this.clickType == 'add') {
        this.tableData.push(this.formItems)
      }
      console.log(this.tableData)
    },
    search () {
      this.loadingshow = true
      this.tableData = []
      setTimeout(() => {
        this.loadingshow = false
        this.tableData = this.testData.slice(3, 15)
      }, 1000)
    }
  },
  mounted () {
    this.tableData = this.testData
    this.jstable = this.jsData
  }
}
</script>

<style>

</style>
